<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram Recreation</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: white;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="550" height="350"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Set common drawing styles
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;
        ctx.fillStyle = 'black';

        // --- 1. Draw Ground ---
        const y_ground = 280;
        ctx.beginPath();
        ctx.moveTo(10, y_ground);
        ctx.lineTo(540, y_ground);
        ctx.stroke();

        // Draw ground hatches
        ctx.lineWidth = 1.5;
        for (let x = 30; x < 540; x += 20) {
            ctx.beginPath();
            ctx.moveTo(x, y_ground);
            ctx.lineTo(x - 15, y_ground + 15);
            ctx.stroke();
        }
        ctx.lineWidth = 2; // Reset line width

        // --- 2. Draw Track Base ---
        const base_x = 40;
        const base_y = 260;
        const base_width = 470;
        const base_height = 20;
        
        // Fill the base with a light gray color
        ctx.fillStyle = '#E0E0E0';
        ctx.fillRect(base_x, base_y, base_width, base_height);
        
        // Outline the base
        ctx.strokeRect(base_x, base_y, base_width, base_height);
        
        // Inner line detail for the track base
        ctx.beginPath();
        ctx.moveTo(base_x, base_y + base_height / 2.5);
        ctx.lineTo(base_x + base_width, base_y + base_height / 2.5);
        ctx.stroke();

        // --- 3. Draw Rollers ---
        const roller_radius = 12;
        const roller_y_center = base_y - roller_radius;
        const roller1_x_center = 150;
        const roller2_x_center = 400;

        ctx.fillStyle = 'white';
        // Roller 1
        ctx.beginPath();
        ctx.arc(roller1_x_center, roller_y_center, roller_radius, 0, 2 * Math.PI);
        ctx.fill();
        ctx.stroke();

        // Roller 2
        ctx.beginPath();
        ctx.arc(roller2_x_center, roller_y_center, roller_radius, 0, 2 * Math.PI);
        ctx.fill();
        ctx.stroke();

        // --- 4. Draw Flatcar ---
        const car_height = 18;
        const car_y_bottom = roller_y_center - roller_radius;
        const car_y_top = car_y_bottom - car_height;
        const car_x_start = 60;
        const car_width = 430;

        ctx.fillStyle = 'white';
        ctx.fillRect(car_x_start, car_y_top, car_width, car_height);
        ctx.strokeRect(car_x_start, car_y_top, car_width, car_height);
        
        // --- 5. Draw Stick Figures ---
        function drawStickFigure(x, y_feet) {
            const h_person = 45;
            const head_radius = 6;
            const leg_height = 18;
            const leg_spread = 12;
            const arm_length = 14;

            const y_head_center = y_feet - h_person + head_radius;
            const y_waist = y_feet - leg_height;
            const y_neck = y_head_center + head_radius;
            const y_shoulders = y_neck + 4;

            ctx.beginPath();
            // Head
            ctx.arc(x, y_head_center, head_radius, 0, 2 * Math.PI);
            ctx.moveTo(x, y_neck);
            // Body
            ctx.lineTo(x, y_waist);
            // Legs
            ctx.lineTo(x - leg_spread / 2, y_feet);
            ctx.moveTo(x, y_waist);
            ctx.lineTo(x + leg_spread / 2, y_feet);
            // Arms
            ctx.moveTo(x - arm_length, y_shoulders + 2);
            ctx.lineTo(x, y_shoulders);
            ctx.lineTo(x + arm_length, y_shoulders + 2);
            ctx.stroke();
            return { head_y: y_head_center };
        }

        const figure1_x = 180;
        const figure2_x = 370;
        const car_top_surface = car_y_top;

        const fig1_info = drawStickFigure(figure1_x, car_top_surface);
        const fig2_info = drawStickFigure(figure2_x, car_top_surface);

        // --- 6. Draw Annotations ---
        // Dashed line between heads
        ctx.beginPath();
        ctx.setLineDash([5, 5]);
        ctx.moveTo(figure1_x, fig1_info.head_y);
        ctx.lineTo(figure2_x, fig2_info.head_y);
        ctx.stroke();
        ctx.setLineDash([]); // Reset to solid line

        // 'N' label
        ctx.fillStyle = 'black';
        ctx.font = "bold 24px serif";
        ctx.textAlign = "center";
        ctx.textBaseline = "bottom";
        const n_x = (figure1_x + figure2_x) / 2;
        const n_y = fig1_info.head_y - 8;
        ctx.fillText("N", n_x, n_y);
        
        // Figure label
        ctx.font = "20px serif";
        ctx.textAlign = "center";
        ctx.textBaseline = "bottom";
        ctx.fillText("Fig. 1.86.", canvas.width / 2, canvas.height - 10);

    </script>
</body>
</html>